<template>
	<view class="bg">
		<view class="menu-box">
			<view class="menu01" v-for="item in list"  @click="getChildren(item)">
				<view :class="oneActive==item.id?'menu01-item active':'menu01-item'">
					<view class="menu01-item-title">{{item.text}}</view>
					<view class="menu02">
						<view :class="twoActive==twochildren.id?'menu02-item active':'menu02-item'" v-if="oneActive==item.id" v-for="twochildren in item.children"  @click="getChildren2(twochildren)">
							<view class="menu02-item-title">{{twochildren.text}}</view>
							<view class="menu03">
								<view :class="threeActive==threechildren.id?'menu03-item active':'menu03-item'"   v-if="twoActive==twochildren.id"  @click="getChildren3(threechildren)" v-for="threechildren in twochildren.children">{{threechildren.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btnbox">
			<button class="btn01">清除</button>
			<button class="btn02">确定</button>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				oneActive:'',
				twoActive:'',
				threeActive:'',
				list: [{
						id: '1',
						text: '商圈',
						children: [{
							id: '11',
							text: '全长沙',
							children: [{
								id: '111',
								text: '麓谷区'
							}, {
								id: '112',
								text: '观沙岭'
							}, {
								id: '113',
								text: '梅溪湖'
							}, {
								id: '114',
								text: '汽车西站'
							}]
						}, {
							id: '12',
							text: '岳麓区'
						}, {
							id: '13',
							text: '雨花区'
						}, {
							id: '14',
							text: '芙蓉区'
						}, {
							id: '15',
							text: '开福区'
						}, {
							id: '16',
							text: '天心区'
						}, {
							id: '17',
							text: '长沙县'
						}, {
							id: '18',
							text: '望城区'
						}, {
							id: '19',
							text: '浏阳市'
						}, {
							id: '20',
							text: '宁乡区'
						}]
					}, {
						id: '2',
						text: '地铁'
					}],
					address:''
				}
			},
			onReady:function() {
				this.oneActive=this.list[0].id;
				this.twoActive=this.list[0].children[0].id;
				this.threeActive=this.list[0].children[0].children[0].id;
			},
			methods: {
			getChildren(item) {
				console.log(item.id);
				this.oneActive=item.id;
				console.log('oneActive===='+this.oneActive);
			},
			getChildren2(item) {
				console.log(item.id);
				this.twoActive=item.id;
				console.log('twoActive===='+this.twoActive);
			},
			getChildren3(item) {
				console.log(item.id);
				this.threeActive=item.id;
				console.log('threeActive===='+this.threeActive);
				this.address=item.text;
				console.log('address===='+this.address);
				this.$util.$setStorageSync("address",this.address)
				uni.switchTab({
					url:'./index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.menu-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-bottom: 150rpx;
		.menu01 {
			.menu01-item {
				padding: 0 40rpx;
				.menu01-item-title {
					height: 100rpx;
					line-height: 100rpx;
				}
				.menu02 {
					// border-left: 1rpx solid #e0e0e0;
					// border-right: 1rpx solid #e0e0e0;
					position: absolute;
					left: 200rpx;
					top: 0;
					width: 279rpx;
					.menu02-item {
						padding: 0 40rpx;
						.menu02-item-title {
							height: 100rpx;
							line-height: 100rpx;
						}
					}

					.menu03 {
						position: absolute;
						left: 280rpx;
						top: 0;
						.menu03-item {
							width: 200rpx;
							padding: 0 40rpx;
							height: 100rpx;
							line-height: 100rpx;
						}
					}
				}
			}

			.menu01-item.active {
				.menu01-item-title {
					color: #37C2BC;
				}

				.menu02-item.active {
					.menu02-item-title {
						color: #37C2BC;
					}

					.menu03-item.active {
						color: #37C2BC;
					}
				}
			}
		}
	}

	.btnbox {
		height: 150rpx;
		position: fixed;
		width: 100%;
		display: flex;
		background: #FFFFFF;
		bottom: 0;
		border-top: 1rpx solid #e0e0e0;
		.btn01 {
			margin-top: 20rpx;
			height: 91rpx;
			line-height: 91rpx;
			width: 216rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			color: #666666;
		}

		.btn02 {
			margin-top: 20rpx;
			width: 431rpx;
			height: 91rpx;
			line-height: 91rpx;
			background: #37C2BC;
			border-radius: 10rpx;
		}
	}
</style>
